<template>
  <el-container >
    
  <el-aside :style="{height:this.size.h+'px',width:'auto'}"  style="position:relative;overflow: inherit;background-color: rgb(238, 241, 246);" >
    
    <el-button @click="collapse" style="position:absolute;left:0px;z-index:2;opacity:.8;width:100%;" plain="true" size="mini">
      <i class="el-icon-d-arrow-right" v-if="isCollapse"></i>
      <i class="el-icon-d-arrow-left" v-if="!isCollapse"></i>
    </el-button>
    
    <el-menu 
      :style="{height:(this.size.h-30)+'px',paddingTop:'30px'}"
     background-color="#545c64"
      text-color="#fff"
      :collapse="isCollapse"
      active-text-color="#ffd04b">
  <el-menu-item index="1" @click="goto('/user')">
    <i class="el-icon-user"></i>
    <span >用户</span>
  </el-menu-item>
    <el-menu-item index="2" @click="goto('/request')">
    <i class="el-icon-eleme"></i>
    <span >请求</span>
  </el-menu-item>
  
    <el-menu-item index="3" @click="goto('/game')">
    <i class="el-icon-orange"></i>
    <span >游戏</span>
  </el-menu-item>
    </el-menu>
  </el-aside>

  <el-container>
    <el-header>
    <el-card shadow="always">
      <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item style="cursor:pointer;" :to="{ path: '/' }">主页</el-breadcrumb-item>
      </el-breadcrumb>
    </el-card>
      
    </el-header>

    <el-main :style="{height:(this.size.h-60)+'px', overflow:'auto'}">
<router-view v-slot="{ Component, route }">
  <!-- 使用任何自定义过渡和回退到 `fade` -->
  <transition :name="route.meta.transition || 'fade'">
    <component :is="Component" />
  </transition>
</router-view>
    </el-main>
  </el-container>
</el-container>
</template>

<script>


import store from "@/store"
export default {
  name: 'Home',
  data(){
    return {
      name :store.state.userinfo.userinfo.name,
      isCollapse: true,
      size : {
        w : window.innerWidth,
        h : window.innerHeight
      }
      
    }
  },
  mounted(){
    let it = this
    window.addEventListener("resize",()=>{
      it.size.w = window.innerWidth
      it.size.h = window.innerHeight
    },false)
  },
  watch:{
    size(n,o){
      console.log(n,o)
    },
   
  },
  methods:{
    collapse(){
      this.isCollapse = !this.isCollapse
    },
    goto(url){
      this.$router.push(url)
    }
  }

}
</script>
